<template>
    <div class="main-container">
        <el-card class="main-card" :style="`height:${view.height}px;`">
            <template #header>
                <!-- 总标题 -->
                <div class="header-title">
                    <h1>中国水利水电科学研究院 - 河南省暴雨洪水图集自动查算系统</h1>
                    <!-- 主题切换按钮 -->
                    <el-button type="" @click="toggleTheme" style="position: absolute; top: 20px; right: 20px">
                        {{ theme === "light" ? "切换到暗黑主题" : "切换到明亮主题" }}
                    </el-button>
                </div>
            </template>
            <el-tabs v-model="activeTab" type="card" style="height: 100%; overflow: hidden" @tab-click="handleTabClick">
                <!-- 山区设计洪水计算（200平方公里以下区） -->
                <el-tab-pane label="山区设计洪水计算（200平方公里以下区）" name="mountain-design-small">
                    <flood_mountain></flood_mountain>
                </el-tab-pane>
                <!-- 平原区设计洪水计算 -->
                <el-tab-pane label="平原区设计洪水计算" name="plain-design">
                    <flood_plain></flood_plain>
                </el-tab-pane>
                <!-- 山区设计洪水计算（200平方公里以上） -->
                <el-tab-pane label="山区设计洪水计算（200平方公里以上）" name="mountain-design-large">
                    <div style="text-align: center; margin: 20px">
                        <h2>山区设计洪水计算功能（200平方公里以上）</h2>
                        <p>点击进入功能页面。</p>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from "vue";
import "element-plus/theme-chalk/dark/css-vars.css";
import flood_mountain from "./flood_mountain.vue";
import flood_plain from "./flood_plain.vue";

const activeTab = ref("mountain-design-small"); // 当前激活的 Tab
const theme = ref("dark"); // 默认主题

// Tab 点击处理
function handleTabClick(tab: any) {
    if (tab.name === "mountain-design-small") {
        window.open("http://123.57.240.141:5000/small", "_blank");
    } else if (tab.name === "mountain-design-large") {
        window.open("http://123.57.240.141:5000/large", "_blank");
    }
}

// 切换主题
function toggleTheme() {
    theme.value = theme.value === "light" ? "dark" : "light";
    document.documentElement.setAttribute("class", theme.value);
}

// 动态调整视图高度
const view = reactive({
    height: window.innerHeight,
});

</script>

<style scoped lang="scss">
.main-card {
    overflow: auto;
}

.header-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
}

h2 {
    margin-bottom: 20px;
}

.form-container {
    margin-bottom: 20px;
}

.table-container {
    margin-top: 20px;
}
</style>
